import { SeriesOption } from 'echarts'
import { useRef, useContext } from 'react'
import { useRecoilValue } from 'recoil'
import useChangeDataEcharts, { EChartsOption } from '@/hooks/useChangeDataEcharts'
import { getTheQuarterName } from '@/utils'
import styles from './index.module.less'
import { reportReviewContext } from '../../_context'
import { theQuarterData } from '@/store/user'

const reportOption: EChartsOption = {
  xAxis: {
    type: 'category',
    data: [],
  },
  grid: {
    left: '50',
    right: '20',
    top: '50',
    bottom: '30',
  },
  title: {
    text: '全省填报率（%）',
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#adb2be',
    borderColor: '#adb2be',
    textStyle: {
      color: '#fff',
    },
    axisPointer: {
      type: 'none',
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%',
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed', // 设置为虚线
      },
    },
  },
  series: [
    {
      data: [],
      type: 'bar',
      itemStyle: {
        color: '#B9CDFF', // 设置柱状图的颜色
        emphasis: {
          color: '#5584FF', // 设置鼠标移入时的颜色
        },
      },
    },
  ] as unknown as SeriesOption[],
}

export default () => {
  const quarterData = useRecoilValue(theQuarterData)
  const { tableList, task } = useContext(reportReviewContext)
  const reportChat = useRef<HTMLDivElement>(null)

  useChangeDataEcharts(reportChat, reportOption, tableList, async (chart) => {
    const option: EChartsOption = {
      xAxis: {
        data: tableList.map((item) => item.locationName),
      },
      tooltip: {
        formatter: (params: any) => {
          const { dataIndex } = params[0] // 当前柱子的索引
          const value = tableList![dataIndex]
          return `${value.locationName}${getTheQuarterName(quarterData, task)}
                    <br /><br />
                    医院总数：${value.hospitalNum}
                    <br />
                    已上报数：${value.committedNum}
                    <br />
                    未上报数：${value.unCommittedNum}
                    <br />
                    填报率：${value.committedRate}%
                    `
        },
      },
      series: [
        {
          data: tableList.map((item) => item.committedRate),
        },
      ],
    }
    chart.setOption(option)
  })
  return (
    <div className={styles.chart}>
      <div style={{ height: '100%' }} ref={reportChat}></div>
    </div>
  )
}
